<nz-modal
  [nzTitle]="title"
  nzCentered
  [nzOkText]="okButtonText"
  [nzVisible]="visible"
  [nzOkDisabled]="settingsForm.invalid"
  (nzOnOk)="handleConfirm()"
  (nzOnCancel)="handleCancel()"
>
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="settingsForm">
      <nz-form-item class="setting-item">
        <nz-form-label class="setting-label" nzFor="url" nzNoColon
          >URL</nz-form-label
        >
        <nz-form-control
          class="setting-control input"
          nzHasFeedback
          [nzErrorTip]="urlErrorTip"
        >
          <input id="url" type="url" required nz-input formControlName="url" />
          <ng-template #urlErrorTip let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入 url！
            </ng-container>
            <ng-container *ngIf="control.hasError('pattern')">
              url 无效！
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <div class="form-group">
        <h2>事件</h2>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox check-all">
            <label
              nz-checkbox
              [nzChecked]="allChecked"
              (nzCheckedChange)="setAllChecked($event)"
              [nzIndeterminate]="indeterminate"
              >全选</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="liveBegan">开播</label>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="liveEnded">下播</label>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="roomChange"
              >直播间信息改变</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="recordingStarted"
              >录制开始</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="recordingFinished"
              >录制完成</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="recordingCancelled"
              >录制取消</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="videoFileCreated"
              >视频文件创建</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="videoFileCompleted"
              >视频文件完成</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="danmakuFileCreated"
              >弹幕文件创建</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="danmakuFileCompleted"
              >弹幕文件完成</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="rawDanmakuFileCreated"
              >原始弹幕文件创建</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="rawDanmakuFileCompleted"
              >原始弹幕文件完成</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="coverImageDownloaded"
              >直播封面下载完成</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="videoPostprocessingCompleted"
              >视频后处理完成</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="postprocessingCompleted"
              >文件后处理完成</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="spaceNoEnough"
              >硬盘空间不足</label
            >
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="setting-item">
          <nz-form-control class="setting-control checkbox">
            <label nz-checkbox formControlName="errorOccurred"
              >程序出现异常</label
            >
          </nz-form-control>
        </nz-form-item>
      </div>
    </form>
  </ng-container>
</nz-modal>
